<!DOCTYPE html>
<html>
    <head>
        <title>Statistiky</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="libs/bootstrap.css" rel="stylesheet" media="screen">
        <link href="css/style.css" rel="stylesheet" media="screen">
        
        <script src="libs/jquery.min.js"></script>
        <script src="libs/removeTags.js"></script>
        
        <script>
            //get content of xml/stats_source.htm                   
            $.ajax({
                type: 'POST',
                url: '../xml/stats_source.html',
                data: "data",
                success: function(data, textStatus, jqXHR) {
                    work(data);
                },
                dataType: "text"
            })
            .fail(function() { $('#inner').html("<hr><b>Chyba. Nelze načíst statistiky.</b>"); });
   
            function work(data) {
                //parse html to dom
                var dom = $.parseHTML(data);
                var table = null;     

                //find the one div
                $.each(dom, function (index, el) {
                    if(el.tagName === "DIV") { 
                        //find tables
                        var tables = el.getElementsByTagName("TABLE");
                        $(tables).each( function() {
                            //find the table we want
                            if($(this).attr('class') === "tabulkax") {
                                table = $(this);
                                return false;
                            }
                        });
                    }
                });
                
                //create the table
                var text = "<table border='1' cellpadding='5'>";
                var content = "";
                //foreach table rows
                $.each(table.context.rows, function(index, row) {
                    text += "<tr>";
                    //foreach cells
                    $.each(row.cells, function(i, element) {
                        content = removeHTMLTags(element.innerHTML);
                        if(i < 4 && (content !== "těžce" && content !== "lehce")) {
                            if(content.indexOf("kraj") === -1)   
                                text += "<td>";
                            else
                                text += "<td class='td_head'>";
                                
                            text += removeHTMLTags(element.innerHTML)+"</td>";
                        }
                    });
                    text += "</tr>";
                });
                text += "</table>";
                
                $('#inner').html(text);
            }
        </script>
    
    </head>
    <body style='overflow:auto; margin: 50px; width: 840px;height:85%'>
        <h2>Statistiky</h2>
        <p>Statistické údaje nehod podle krajů a měst za rok 2011.</p>
        <div id='inner'></div>
    </body>
</html>